<template>
    <div class="active">
        <p class="hot">热销推荐</p>
        <router-link to="/detail">
        <div class="viewspot" v-for="(v,i) in hot" :key="i">
            <div class="viewspot-one">
                <img :src="v.imgUrl" alt="">
                <div class="section">
                    <h4 class="name">{{v.title}}</h4>
                    <p class="introduce">{{v.desc}}</p>
                    <button>查看详情</button>
                </div>
            </div>
        </div>
        </router-link>
    </div>
</template>

<script>
export default {
    name:"recommend",
    props:['hot']
}
</script>

<style lang="less" scoped>
    .active{
        margin-top: 0.3rem;
        .hot{
            height: 0.84rem;
            line-height: 0.84rem;
            background-color: #eeeeee;
            padding-left: 0.19rem;
            font-size: 0.33rem;
        }
        .viewspot-one{
            height: 1.96rem;
            margin: 0 0.2rem;
            margin-top: 0.1rem;
            margin-bottom: 0.2rem;
            border-bottom: 1px #eeeeee dashed;
            img{
                float: left;
                width: 1.76rem;
                height: 1.76rem;
            }
            .section{
                float: left;
                margin-left: 0.2rem;
                width: 72%;
                h4{
                    font-size: 0.4rem;
                    color: black;
                }
                .introduce{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 0.33rem;
                    color: #919191;
                    margin: 0.23rem 0;
                }
                button{
                    width: 1.81rem;
                    height: 0.52rem;
                    background-color: #ff9300;
                    color: white;
                    border-radius: 2px;
                    font-weight: 600;
                }

            }
            
        }
    }
</style>
